<template name="ruta">
    <div id="mapa_creacion_container">
        <!-- MAPA LOADER -->
        <div id="mapa_loader">
            <div id="mapa_loader_bg"></div>
            <div id="mapa_loader_content">
                <span>Cargando...</span><br/><br/>
                <img src="/images/maps/loading.gif" />
            </div>
        </div>
        <!-- /MAPA LOADER -->
        <!-- EMBED MAPS API FOR ASETU -->
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing&key=AIzaSyDEfyw7eaca4DLz_p9c5fjYmfVT_eN0UHU"></script>
        <script type="text/javascript">
          var script = '<script type="text/javascript" src="http://google-maps-' +'utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble';
          if (document.location.search.indexOf('compiled') !== -1) { script += '-compiled'; }
          script += '.js"><' + '/script>';
          document.write(script);
        </script>
        <!-- /EMBED MAPS API FOR ASETU -->
        <h2>Ruta</h2>
        <span class="requerido">*</span><strong>Nombre de la ruta:</strong> <input type="text" id="nombre_recorrido" style="width: 400px;" value="{{['ruta']['nombre_ruta']}}"/>
        <br/>
        <br/>
        <div id="button_examinar">EXAMINAR RUTA</div>
        <div id="button_dibujar">DIBUJAR RUTA</div>
        <div id="button_undo_route" style="display: none;">DESHACER RUTA</div>
        <div id="button_marcar">MARCAR RUTA</div>
        <div id="button_save_incomplete">GUARDAR INCOMPLETO</div>
        <div class="button_save_all">GUARDAR TODO</div>
        <br/>
        <br/>
        <div id="undo_confirm" title="Deshacer ultima lina de la ruta?" style="display: none">
            <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Si la linea borrada tiene un punto de control sobre ella, este deber&aacute; ser borrado manualmente. Est&aacute;s seguro que deseas continuar?</p>
        </div>
        <div id="nuevo_recorrido_mapa"></div>
        <div id="recorrido_puntos" class="ui-widget ui-widget-content ui-corner-all">
            <div id="recorrido_puntos_title">Ordenar puntos</div>
            <ul id="recorrido_puntos_order"></ul>
        </div>
        <div class="clear"></div>
        <br/>
        <div id="relaciones_referencias">
            <div class="point_org">Origen</div>
            <div class="point_dest">Destino</div>
            <div class="point_label">Nombre</div>
            <div class="point_time">Tiempo</div>
            <div class="franjas_list">
                <span id="franja_move_left">a</span>
                <div id="franjas_container">
                    <div id="franjas_container_foo">
                        <template name="franja">
                            <div class="franja_reference">{{nombre}}</div>
                        </template>
                    </div>
                </div>
                <span id="franja_move_right">a</span>
            </div>
        </div>
        <br/>
        <div id="relaciones_puntos">
            <div id="relation_default_foo" class="route_point ui-widget ui-widget-content ui-corner-all" style="display: none">
                <div class="point_icon"><img src="/images/maps/flag_icon.png" width="26" height="26"/></div>
                <div class="point_org">Punto X</div>
                <div class="point_dest">Punto Y</div>
                <div class="point_label"><input type="text" class="point_label_value" /></div>
                <div class="point_time"><input type="text" class="point_time_value" name="route[times][default][]" readonly="readonly" /></div>
                <div class="franjas_list">
                    <div class="franjas_container_foo">
                        <template name="franja_punto">
                            <div class="point_time_franja_value_container">
                                <input type="text" class="point_time_value_franja ui-state-disabled" name="route[times][franja_{{idfranja}}][]" franja="{{idfranja}}" readonly="readonly" disabled="disabled" />
                            </div>
                        </template>
                    </div>
                </div>
            </div>
            </div>
        </div>
        <br/>
        <br/>
        <span class="requerido">*</span><span>Campos requeridos</span>
        <!-- HIDDEN FORM USED FOR SAVING -->
        <input type="hidden" name="ruta[camino][foo_camino_punto][lat]" id="foo_punto_camino_lat" />
        <input type="hidden" name="ruta[camino][foo_camino_punto][lng]" id="foo_punto_camino_lng" />
        <input type="hidden" name="ruta[camino][foo_camino_punto][path]" id="foo_punto_camino_path" />
        <input type="hidden" name="ruta[puntos][foo_punto][nombre]" id="punto_foo_nombre" />
        <input type="hidden" name="ruta[puntos][foo_punto][latitud]" id="punto_foo_latitud" />
        <input type="hidden" name="ruta[puntos][foo_punto][longitud]" id="punto_foo_longitud" />
        <input type="hidden" name="ruta[puntos][foo_punto][segundos_anterior]" id="punto_foo_segundos_anterior" />
        <input type="hidden" name="ruta[puntos][foo_punto][distancia_anterior]" id="punto_foo_distancia_anterior" />
        <input type="hidden" name="ruta[puntos][foo_punto][orden]" id="punto_foo_orden" />
        <input type="hidden" name="ruta[puntos][foo_punto][franjas][foo_franja_punto_orden]" id="foo_franja_punto" />
        <form name="hidden_save" method="POST" id="hidden_save_form">
            <input type="hidden" name="ruta[idruta]" id="idruta" value="{{['ruta']['idruta']}}"/>
            <input type="hidden" name="ruta[nombre_ruta]" id="ruta_nombre" />
        </form>
        <script type="text/javascript" src="/js/admin_mapas.js"></script>
        <script type="text/javascript">
            // Load listener
            $(function(){
                google.maps.event.addDomListener(window, 'load', initialize);
            });
            // Ajax urls
            var guardarRutaAction = '{{guardar_ruta_url}}';
            // Ruta precargada
            function preloadedRoute()
            {
                <template name="dibujar_camino">
                drawRouteEdit({{num}}, {{lat}}, {{lng}}, {{path}});
                </template>
                <template name="dibujar_punto">
                drawPointsEdit({{idpunto_por_ruta}}, {{latitud}}, {{longitud}}, '{{nombre}}', {{segundos_anterior}}, {{distancia_anterior}});
                </template>
                <template name="marcar_franja">
                updateFranjaPorPunto({{fkpunto_por_ruta}}, {{fkfranja}}, {{segundos_anterior}});
                </template>
            }
        </script>
    </div>
</template>